<template>
    <div class="opacity-attr_wrap">
        <h5 class="title">透明度</h5>
        <div class="opacity-mode__item">
            <input 
                class="input__picker cursor"
                step="0.05"
                min="0"
                v-model="opacity"
                max="1" 
                type="range"
                @input="onOpacityUpdate"/>
            <span class="opacity-size_value">{{ opacity }}</span>
        </div>
    </div>
</template>

<script setup name="OpacityAttribute">
import useSharedCore from '@/hooks/shared';
const { coverEditor } = useSharedCore();

const opacity = ref(1)

const onOpacityUpdate = (val) => {
    const active = coverEditor?.canvas?.getActiveObject()
    active.set('opacity', opacity.value)
    coverEditor.canvas.renderAll()
}

const getActiveObjectAttr = (evt) => {
    const active = coverEditor?.canvas?.getActiveObject()
    if (evt && evt.target && evt !== active) return
    if (active) opacity.value = active.get('opacity')
}

onMounted(() => {
    coverEditor.on('selectOne', getActiveObjectAttr);
})
onBeforeUnmount(() => {
    coverEditor.off('selectOne', getActiveObjectAttr);
})
</script>

<style lang="scss" scoped>
    .opacity-attr_wrap {
        padding-bottom: 12px;
        font-size: 14px;
        .opacity-mode__item {
            display:flex;
            align-items:center;
            .input__picker {
                width:90%;
            }
            .opacity-size_value {
                font-weight: bold;
                padding-left: 5px;
            }
        }
    }
</style>